<template>
    <div>
        <!-- <div>{{$route.params}}</div>
        {{this.info}} -->
        <div class="header">
             <a href="/hindex">首页</a>
             <div>{{info.total}}</div>
             <!-- <el-button type="">{{this.info.name}}</el-button> -->
        </div>
        <div class="container">
            <img :src="info.picture" alt="加载异常">
            <div class="main">
                <h2>{{info.total}}</h2>
                <table>
                    <tr>
                        <td>职位：</td>
                        <td>{{info.position}}</td>
                    </tr>
                    <tr>
                        <td>招聘要求：</td>
                        <td>{{info.workRequire}}</td>
                    </tr>
                    <tr>
                        <td>工资待遇：</td>
                        <td>{{info.workSalary}}</td>
                    </tr>
                    <tr>
                        <td>工作地点：</td>
                        <td>{{info.workPlace}}</td>
                    </tr>
                    <tr>
                        <td>工作时间：</td>
                        <td>{{info.workTime}}</td>
                    </tr>
                    <tr>
                        <td>招聘人数：</td>
                        <td>{{info.recruitsNum}}</td>
                    </tr>
                    <tr>
                        <td>招聘时间：</td>
                        <td>{{info.recruitsTime}}</td>
                    </tr>
                    <tr>
                        <td>截止时间：</td>
                        <td>{{info.recruitsEndTime}}</td>
                    </tr>
                     <tr>
                        <td>负责人：</td>
                        <td>{{info.lead}}</td>
                    </tr>
                    <tr>
                        <td>联系方式：</td>
                        <td>{{info.contact}}</td>
                    </tr>
                     <tr>
                        <td>发布日期：</td>
                        <td>{{info.releaseDate}}</td>
                    </tr>
                    <tr>
                        <td>点击次数：</td>
                        <td>{{info.clickNum}}</td>
                    </tr>
                </table>
                <div @click="$router.push('/zhiyuanview/zhiyuaninfo/yingpin/'+info.id)">应聘</div>
            </div>
        </div>
     
    </div>
</template>
<script>
export default {
    data () {
        return {
            info:{}
        }
    },
    methods: {
        async getinfo(id){
            let {data:res}=await this.$axios.get('/volunteer/getlist?pageNum=1&pageSize=4&id='+id);
            window.console.log(res)
            this.info=res.data.list[0]
        }
    },
    created () {
        let id=this.$route.params.id;
        this.getinfo(id)
    }
}
</script>
<style lang="scss" scoped>
    .header{
        height: 50px;
        width: 70%;
        margin: 20px auto;
        background-color: deepskyblue;
        border-radius: 3px;
        // line-height: 50px;
        display: flex;
        // justify-content: center;
        align-items: center;
        a{
            margin: 0 50px 0 20px;
            color: white;
        }
        div{
            background-color: white;
            border-radius: 5px;
            padding: 0 20px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #666;
        }
    }
    .container{
       
        width: 70%;
        margin: 0 auto 50px;
        // border: 1px solid salmon;
        border-radius: 2px;
        // line-height: 50px;
        display: flex;
        img{
            width: 30%;
            height: 350px;
            border-radius: 5px;
            box-shadow: 0 0 5px deepskyblue;
        }
        .main{
            width: 70%;
            // border: 1px solid seagreen;
            text-align: center;
           
            h2{
                margin: 20px 0;
            }
            table{
              color: #666;
              margin:30px  50px ;
              tr{
                  
                  height: 50px;
              }
            }
            div{
                margin-left: 100px;
                color: aqua;
                width: 50px;
                height: 30px;
                line-height: 30px;
                box-shadow: 0 0 5px aqua;
                cursor: pointer;
            }
        }
    }
  
</style>